<template>
<el-row type="flex" justify="center" class="list-main">
  <el-col :span="16">
    <!--列表、卡片、区域-->
    <el-row>
        <!--日记列表-->
        <el-col :span="19">
          <el-radio-group v-model="radio" class="radio-group">
            <el-radio-button size="small" label="list"><i class="el-icon-tickets"></i>list</el-radio-button>
          </el-radio-group>

          <!--创建按钮-->
          <el-button size="small" class="el-icon-edit" @click="write" circle>write</el-button>
        </el-col>

    </el-row>

    <el-divider></el-divider><!--分隔线-->


    <el-row v-show="radio==='list'">
      <div class="scroll-box">
        <el-timeline class="scroll">
          <el-timeline-item :timestamp="getDateTime(index)" placement="top" v-for="(list,index) in lists" :key="index">
            <el-card @click.native="detail(index)">
              <div>
                <h4>{{list.title}}</h4>
                <!--时间线卡日期年月日分钟-->
                <p class="card-date">
                  {{getCardDate(index)}}
                </p>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- /日记列表输出部分-->
    </el-row>

  </el-col>
</el-row>
</template>

<script>
import Constant from '../constant'
export default {
  name: "DiaryList",
  data() {
    return {
      lists: this.$store.state.list,
      no: 0,
      // search: '',
      radio: 'list',  //radio
    };
  },
  created: function() {
    this.no = this.$store.state.list.no;  
  },
  methods: {
    write() {
      let router = this.$router;
      router.push({
        path: '/diary/write'
      })
    },
    remove(index) {
      this.$store.commit(Constant.DELETE_DIARY, {index: index});
      this.$message({
        type:'info',
        message: '已删除'
      });
    },
    detail(no) {
      let router = this.$router;
      router.push(`/diary/${no}`);
    },
    getDateTime(index){
      let date = `${this.lists[index].date.getFullYear()}年${this.lists[index].date.getMonth()+1}月${this.lists[index].date.getDate()}日`;
      return date;
    },
    getCardDate(index){
      let date;
      let hours = this.lists[index].date.getHours();
      let minutes = this.lists[index].date.getMinutes();

      if(minutes < 10) {minutes = `0${minutes}`;}

      if(hours > 12){
        hours = hours-12;
        if(hours < 10) {hours = `0${hours}`;}
        date = `${this.getDateTime(index)}
                下午 ${hours}时${minutes}分`;
      }
      else{
        if(hours < 10) {hours = "0"+hours;}
        date = `${this.getDateTime(index)}
                上午 ${hours}时${minutes}分`;
      }
      return date;
    }
  }
}
</script>

<style scoped>
  .list-main{
    margin-top: 2%;
  }

  .el-icon-edit{
    background-color: #97aaf0;
    color:white;
  }
  .el-icon-edit:hover{
    color:black;
  }
  .radio-group{
    margin-right: 20px;
  }

  .card-date{
    font-size: 13px;
    color: #97adf0;
  }

  .scroll-box{
    height:500px; 
    overflow:overlay;
    overflow-x: hidden;
  }
  .scroll{
    overflow:auto;
    padding: 0 4% 0 3%;
  }

</style>